<template>
	<viewQuestions v-if="isShowView" :selectedNodeName="selectedNodeName" :typeList="typeList"
		:categoryIdOne="categoryId1Data" :categoryIdTwo="categoryId2Data" :categoryIdThree="categoryId3Data"
		:chapterId="query.chapterId" @handleReturn="isShowView=false">
	</viewQuestions>
	<div v-else>
		<div class="topTitle">章节练习</div>
		<div class="row-me">
			<div style="background-color: #eef1f6;border: 1px solid rgb(238, 241, 246);" class="margin-right20 flex1">
				<div class="align-center margin-top30">
					章节菜单
				</div>
				<div class="margin-top20 row-me center-all">
					<el-form :inline="true" :model="query2" class="width80Per">
						<el-form-item>
							<el-cascader :props="props" v-model="query2.cityCode" :options="areaData" placeholder="请选择地区"
								class="width200" @change="getTreeData">
								<template slot-scope="{ node, data }">
									<span>{{ data.name }}({{data.cityCount}})</span>
								</template>
							</el-cascader>
						</el-form-item>
						<el-form-item>
							<el-button size="mini" type="primary" @click="addChapter">添加</el-button>
							<el-button size="mini" type="warning" @click="clickUpdate">更新</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="row-me center-all">
					<div class="width80Per">
						<div class="margin-bottom10 row-me center-all">
							<div class="flex1 colorBlue">{{advertiseInfo.advertiseMark||''}}</div>
							<el-button type="text" @click="advertiseVisible=true">{{advertiseInfo.id?'编辑':'新建'}}</el-button>
						</div>
						<el-tree :data="treeData" node-key="id" @node-contextmenu="clickRight" @node-click="selectNode"
							:highlight-current="true" :auto-expand-parent="false" :props="myProps" :expand-on-click-node="false">
							<span class="width100Per row-me row-center space-between font-size14" slot-scope="{ node, data }">
								<span>{{ node.label }}[{{ data.questionCount }}]</span>
								<span class="margin-right10">
									<el-button v-if="data.childs.length==0" type="text" size="mini"
										@click="() => showChapterLib(node, data)">
										查看已有试题
									</el-button>
								</span>
							</span>
						</el-tree>
						<div class="margin-top10">
							<el-pagination background layout="->,total, prev, pager, next" :current-page="query2.pageNumber"
								:page-size="query2.pageSize" :total="pageTreeTotal" @current-change="handlePageChangeTree" small>
							</el-pagination>
						</div>
					</div>
					<!--鼠标右键点击出现页面-->
					<div v-show="menuVisible">
						<el-menu id="rightClickMenu" class="el-menu-vertical" @select="handleRightSelect" active-text-color="#fff"
							text-color="#fff">
							<el-menu-item index="1" class="menuItem">
								<span slot="title">修改章节</span>
							</el-menu-item>
							<el-menu-item index="2" class="menuItem">
								<span slot="title">删除章节</span>
							</el-menu-item>
							<el-menu-item index="4" class="menuItem">
								<span slot="title">添加子章点</span>
							</el-menu-item>
							<hr style="color: #ffffff" />
							<el-menu-item index="5" class="menuItem">
								<span slot="title">上移</span>
							</el-menu-item>
							<el-menu-item index="6" class="menuItem">
								<span slot="title">下移</span>
							</el-menu-item>
							<hr style="color: #ffffff" v-show="rightClickData.childs.length == 0" />
							<el-menu-item index="7" class="menuItem" v-show="rightClickData.childs.length == 0">
								<span slot="title">其他章节导入</span>
							</el-menu-item>
						</el-menu>
					</div>
				</div>
			</div>
			<div class="flex2 overflow-auto">
				<el-form inline :model="query" label-width="80px">
					<el-form-item label="题型">
						<el-select v-model="query.type" placeholder="请选择题型" clearable class="margin-right10 width220">
							<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="题目属性">
						<el-select v-model="query.properType" placeholder="请选择题目属性" clearable class="margin-right10 width220">
							<el-option label="普通题" :value="1"></el-option>
							<el-option label="作废题" :value="2"></el-option>
							<el-option label="争议题" :value="3"></el-option>
							<el-option label="重复题" :value="4"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="章节分类">
						<el-select filterable v-model="query.categoryId3" placeholder="请选择章节分类" clearable
							class="width220 margin-right10">
							<el-option v-for="item in categoryId3Data" :key="item.id" :label="item.name" :value="item.id"
								:style="{'color': item.color?item.color:''}"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="模块分类">
						<el-select filterable v-model="query.categoryId2" placeholder="请选择模块分类" clearable
							class="width220 margin-right10">
							<el-option v-for="item in categoryId2Data" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="综合分类">
						<el-select filterable v-model="query.categoryId1" placeholder="请选择综合分类" clearable
							class="width220 margin-right10">
							<el-option v-for="item in categoryId1Data" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="来源地区">
						<el-cascader :props="props" v-model="query.cityCode" :options="areaData" placeholder="请选择地区"
							class="width220 margin-right10">
						</el-cascader>
					</el-form-item>
					<el-form-item label="来源年份">
						<el-date-picker v-model="query.year" type="year" placeholder="请选择" class="margin-right10 width220"
							value-format="yyyy">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="题目标签">
						<el-select v-model="query.labelIds" placeholder="请选择题目标签" clearable class="margin-right10 width220">
							<el-option :label="item.name" v-for="item in tagList" :key="item.id" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="模糊搜索">
						<el-input placeholder="请输入关键字" v-model="query.title" class="width220 margin-right10"></el-input>
					</el-form-item>
				</el-form>
				<div class="margin-top20 margin-bottom20 row-me">
					<el-button type="primary" @click="handleAddToLib">添加至当前章节</el-button>
					<el-button type="primary" @click="paramsVisible=true">参数设置</el-button>
					<el-button type="primary" @click="randChange">随机</el-button>
					<div class="flex1"></div>
					<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
					<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
				</div>
				<el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header-style"
					@selection-change="handleSelectionChange">
					<el-table-column type="expand">
						<template slot-scope="props">
							<b>
								<p v-html="props.row.title"></p>
							</b>
							<br />
							<div v-if="props.row.type.value == 0 || props.row.type.value == 1">
								<el-table :data="props.row.optionList" style="width: 100%">
									<el-table-column label="选项" width="50">
										<template slot-scope="scope">{{ option[scope.$index] }}</template>
									</el-table-column>
									<el-table-column label="内容">
										<template slot-scope="scope">
											<el-image v-if="imgTypeList.indexOf(scope.row.content)!=-1" :src="scope.row.content"
												class="width100 height100" fit="scale-down" :preview-src-list="[scope.row.content]"></el-image>
											<p v-html="scope.row.content" v-else></p>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<br />
							<b>
								<p>答案：<span v-html="props.row.answer"></span></p>
							</b>
						</template>
					</el-table-column>
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column label="试题" :show-overflow-tooltip="true">
						<template slot-scope="scope">
							<p v-html="scope.row.title"></p>
						</template>
					</el-table-column>
					<el-table-column prop="type.name" width="100" label="题型" align="center">
					</el-table-column>
					<el-table-column prop="category1" width="300" label="分类" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.category3 }}/{{ scope.row.category2 }}/{{ scope.row.category1 }}</span>
						</template>
					</el-table-column>
				</el-table>
				<div class="margin-top10">
					<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
						@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
						@current-change="handlePageChange">
					</el-pagination>
				</div>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="nodeEditVisibleTitle" :visible.sync="nodeEditVisible" width="30%">
			<el-form ref="form" :model="editNodeParam" label-width="auto">
				<el-form-item label="所属省市" v-if="!editNodeParam.parentId">
					<el-cascader :props="props" v-model="editNodeParam.cityCode" :options="areaData" placeholder="请选择"
						class="width100Per">
					</el-cascader>
				</el-form-item>
				<el-form-item label="章节名称">
					<el-input v-model="editNodeParam.name" autofocus placeholder="名称" @input="$forceUpdate()"></el-input>
				</el-form-item>
				<el-form-item label="添加类型">
					<el-radio-group v-model="editNodeParam.addType" @change="$forceUpdate()">
						<el-radio :label="1">按章节添加</el-radio>
						<el-radio :label="2">按标签添加</el-radio>
						<el-radio :label="3">手动添加</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="章节分类" v-show="editNodeParam.addType==1">
					<el-select filterable multiple v-model="editNodeParam.categoryId" placeholder="请选择章节分类" class="width100Per"
						@change="$forceUpdate()">
						<el-option v-for="point in categoryId3Data" :key="point.id" :label="point.name" :value="point.id+''"
							:style="{'color': point.color?point.color:''}">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标签分类" v-show="editNodeParam.addType==2">
					<el-select v-model="editNodeParam.labelIds" placeholder="请选择标签" filterable multiple clearable
						class="width100Per" @change="$forceUpdate()">
						<el-option :label="item.name" v-for="item in tagList" :key="item.id" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否显示">
					<el-switch v-model="editNodeParam.showOpen" @change="$forceUpdate()">
					</el-switch>
				</el-form-item>
				<el-form-item label="显示顺序">
					<el-radio-group v-model="editNodeParam.sort" @change="$forceUpdate()">
						<el-radio :label="1">按题目ID</el-radio>
						<el-radio :label="2">ID倒序</el-radio>
						<el-radio :label="3">按时间</el-radio>
						<el-radio :label="4">随机</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="章节提示">
					<el-input placeholder="请输入章节提示" v-model="editNodeParam.chapterShow" class="width100Per"
						@input="$forceUpdate()"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="nodeEditVisible = false">取 消</el-button>
				<el-button type="primary" @click="nodeHandle">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 参数设置 -->
		<el-dialog title="参数设置" :visible.sync="paramsVisible" width="30%">
			<el-form :model="params" label-width="80px">
				<el-form-item label="默认题数:">
					<el-select placeholder="请选择默认题数" v-model="params.num">
						<el-option v-for="(item,index) in 5" :key="index" :label="item*10" :value="item*10"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="默认题型:">
					<el-select placeholder="请选择默认题型" v-model="params.type">
						<el-option label="全部" value="1"></el-option>
						<el-option label="主观题" value="2"></el-option>
						<el-option label="客观题" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="随机模式:">
					<el-select placeholder="请选择随机模式" v-model="params.pattern">
						<el-option label="答题模式" value="1"></el-option>
						<el-option label="背题模式" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="paramsVisible = false">取 消</el-button>
				<el-button type="primary" @click="clickParamsSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 提示语设置 -->
		<el-dialog title="提示语设置" :visible.sync="advertiseVisible" width="30%">
			<el-form :model="advertiseInfo" label-width="80px">
				<el-form-item label="提示语">
					<el-input v-model="advertiseInfo.advertiseMark" placeholder="请输入提示语" @change="$forceUpdate"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="advertiseVisible = false">取 消</el-button>
				<el-button type="primary" @click="advertiseMiniAdd">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import viewQuestions from "@/components/viewQuestions"
	export default {
		components: {
			viewQuestions
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				query2: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTreeTotal: 0,
				pageTotal: 0,
				categoryId1Data: [],
				categoryId2Data: [],
				categoryId3Data: [],
				tagList: [],
				tableData: [],
				leftClickData: [],
				rightClickData: [],
				option: ['A', 'B', 'C', 'D', 'E', 'F'],
				multipleSelection: [],
				menuVisible: false,
				objectID: '',
				treeData: [],
				editNodeParam: {},
				myProps: {
					children: 'childs',
					label: 'name',
					examNum: 'examNum',
					isLeaf: (data, node) => {
						if (data.childs == 0) {
							return true
						}
					},
				},
				nodeEditVisible: false,
				nodeEditVisibleTitle: '',
				props: {
					emitPath: false,
					value: 'id',
					label: 'name',
					checkStrictly: true,
				},
				importFromChapter: false,
				importChapterParams: {},
				importData: [],
				selectedNodeName: '',
				params: {
					num: '',
					type: '',
					pattern: ''
				},
				isShowView: false,
				leftClickData: {
					childs: []
				},
				rightClickData: {
					childs: []
				},
				paramsVisible: false,
				typeList: [],
				areaData: [],
				advertiseInfo: {},
				advertiseVisible: false,
				imgTypeList: ['jpg', 'jpeg', 'png', 'svg']
			}
		},
		mounted() {
			this.query2.cityCode = '0'
			this.getType()
			this.getSort()
			this.getTagList()
			this.getTreeData()
			this.getAllArea()
			this.getByKey('chapter_num', 'num', 'numId')
			this.getByKey('chapter_type', 'type', 'typeId')
			this.getByKey('chapter_pattern', 'pattern', 'patternId')
		},
		methods: {
			// 一键更新
			async clickUpdate() {
				const res = await this.$get('/admin/chapter/chapterUpdate')
				if (res.code == 1000) {
					if (this.$.isEmpty(this.query.chapterId)) {
						this.$message.warning('请选择左侧叶子章节进行搜索');
						return;
					}
					this.$message.success('操作成功')
					this.query.pageNumber = 1
					this.getData();
				}
			},
			randChange() {
				this.query.randType = 1
				this.handleSearch()
			},
			//根据科目和地区添加章节提示语
			async advertiseMiniAdd() {
				let url = '/admin/articleNotice/advertiseMiniAdd'
				if (this.advertiseInfo.id) {
					url = '/admin/articleNotice/advertiseMiniUpdate'
				}
				this.advertiseInfo.areaId = this.query2.cityCode
				const res = await this.$post(url, this.advertiseInfo)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.advertiseMiniShow()
					this.advertiseVisible = false
				}
			},
			// 根据科目和地区查询章节提示语
			async advertiseMiniShow() {
				const res = await this.$postForm('/admin/articleNotice/advertiseMiniShow', {
					areaId: this.query2.cityCode
				})
				if (res.code == 1000) {
					this.advertiseInfo = res.data || {}
				}
			},
			//获取章节默认题数
			async getByKey(key, name, id) {
				const res = await this.$get('/admin/config/getByKey', {
					key
				})
				if (res.code == 1000) {
					this.params[id] = res.data.id
					this.params[name] = res.data.value
				}
			},
			//参数设置
			async configUpdate(value, id) {
				const res = await this.$post('/admin/chapter/chapterConfig', {
					id,
					value
				})
			},
			//参数设置
			clickParamsSave() {
				this.configUpdate(this.params.num, this.params.numId)
				this.configUpdate(this.params.type, this.params.typeId)
				this.configUpdate(this.params.pattern, this.params.patternId)
				this.$message.success('操作成功')
				this.paramsVisible = false
				this.getByKey('chapter_num', 'num')
				this.getByKey('chapter_type', 'type')
				this.getByKey('chapter_pattern', 'pattern')
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getProvince')
				if (res.code == 1000) {
					this.areaData = this.$.getTreeData(res.data)
					this.areaData.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: '0',
						cityCount: this.areaData[0].counts || 0
					})
				}
			},
			// //列表时过滤富文本
			// praseTitle(title) {
			// 	var reg = /&nbsp;/g;
			// 	title = title.replace(/<\/?[^>]*>|(\n|\t|\r)|(\s)/g, '').replace(reg, '');
			// 	return title;
			// },
			//查看章节题库
			showChapterLib(node, data) {
				this.selectedNodeName = data.name
				this.query.chapterId = data.id
				this.isShowView = true
			},
			//添加至当前章节
			handleAddToLib() {
				var vm = this;
				// 二次确认添加
				this.$confirm('确定要添加至【' + vm.selectedNodeName + '】吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						//构建ID数组
						let ids = Array.from(this.multipleSelection, ({
							id
						}) => id)
						vm.$post('/admin/chapter/addQuestions?chapterId=' + vm.query.chapterId,
								ids)
							.then(function(response) {
								if (response.code != 1000) {
									vm.$message.error('搜索服务异常');
									return;
								}
								vm.$message.success('添加成功');
								vm.getData();
							});
					})
					.catch(() => {});
			},
			handleRightSelect(key) {
				console.log(this.rightClickData, "rightClickData")
				if (key == 1) {
					//修改节点
					this.nodeEditVisibleTitle = '修改【' + this.rightClickData.name + '】名称';
					this.editNodeParam.id = this.rightClickData.id;
					this.editNodeParam.parentId = this.rightClickData.parentId;
					this.editNodeParam.name = this.rightClickData.name || '';
					this.editNodeParam.addType = this.rightClickData.addType || '';
					this.editNodeParam.sort = this.rightClickData.sort || '';
					this.editNodeParam.showOpen = this.rightClickData.showOpen || false;
					this.editNodeParam.categoryId = this.rightClickData.categoryId ? this.rightClickData.categoryId.split(',') :
				[];
					this.editNodeParam.chapterShow = this.rightClickData.chapterShow || '';
					this.editNodeParam.cityCode = this.rightClickData.cityCode ? parseInt(this.rightClickData.cityCode) : ''
					this.editNodeParam.labelIds = this.rightClickData.labelIds ? this.rightClickData.labelIds.split(',').map(
						Number) : []
					// if (this.rightClickData.categoryId) {
					// 	let ids = this.rightClickData.categoryId.split(',');
					// 	let categoryIds = [];
					// 	for (var i = 0; i < ids.length; i++) {
					// 		if (ids[i] == '') {
					// 			continue;
					// 		} else {
					// 			categoryIds.push(Number(ids[i]));
					// 		}
					// 	}
					// 	this.editNodeParam.categoryId = categoryIds;
					// }
					this.nodeEditVisible = true;
					this.menuVisible = false;
				} else if (key == 2) {
					var vm = this;
					if (this.rightClickData.id == 1) {
						this.$message.warning('此节点为初始化节点，不支持删除，仅支持修改。');
						return;
					}
					this.$confirm('确定删除【' + this.rightClickData.name + '】吗？', '提示', {
							type: 'warning'
						})
						.then(() => {
							this.$get('/admin/chapter/delete', {
									id: this.rightClickData.id
								})
								.then(function(response) {
									if (response.code == 1000) {
										vm.$message.success(response.message);
										vm.nodeEditVisible = false;
										vm.getTreeData();
									} else {
										vm.$message.error(response.message);
										vm.nodeEditVisible = false;
										return;
									}
								});
						})
						.catch(() => {});
					this.menuVisible = false;
				} else if (key == 3) {
					//增加兄弟节点
					var vm = this;
					this.nodeEditVisibleTitle = '添加【' + this.rightClickData.name + '】同级章节';
					this.editNodeParam = {}
					this.editNodeParam.parentId = this.rightClickData.parentId;
					this.nodeEditVisible = true;
					this.menuVisible = false;
					if (vm.citys.length <= 0) vm.getProvince();
				} else if (key == 4) {
					var vm = this;
					this.nodeEditVisibleTitle = '添加【' + this.rightClickData.name + '】子级章节';
					this.editNodeParam = {}
					this.editNodeParam.parentId = this.rightClickData.id;
					this.nodeEditVisible = true;
					this.menuVisible = false;
				} else if (key == 5) {
					var vm = this;
					this.$get('/admin/chapter/moveUp', {
						id: this.rightClickData.id
					}).then(function(response) {
						if (response.code == 1000) {
							vm.$message.success(response.message);
							vm.getTreeData();
						} else {
							vm.$message.error(response.message);
							return;
						}
					});
				} else if (key == 6) {
					var vm = this;
					this.$get('/admin/chapter/moveDown', {
							id: this.rightClickData.id
						})
						.then(function(response) {
							if (response.code == 1000) {
								vm.$message.success(response.message);
								vm.getTreeData();
							} else {
								vm.$message.error(response.message);
								return;
							}
						});
				} else if (key == 7) {
					var vm = this;
					this.getDataImport();
					this.importFromChapter = true;
					this.importChapterParams.id = this.rightClickData.id;
					this.importChapterParams.name = this.rightClickData.name;
					this.menuVisible = false;
				}
			},
			async getDataImport() {
				let params = Object.assign({}, this.query3);
				const res = await this.$get('/admin/chapter/pageChapter', params)
				this.importData = res.data;
			},
			async nodeHandle() {
				if (this.$.isEmpty(this.editNodeParam.addType)) {
					this.$message.warning('请选择添加类型!')
					return
				}
				if (this.editNodeParam.addType == 2) {
					this.editNodeParam.labelIds = this.editNodeParam.labelIds ? this.editNodeParam.labelIds.toString() : ''
				} else {
					this.editNodeParam.labelIds
				}
				this.editNodeParam.showOpen = this.editNodeParam.showOpen ? true : false
				let params = Object.assign({}, this.editNodeParam);
				if (params.categoryId) {
					params.categoryId = params.categoryId.join(',');
				}
				const res = await this.$get('/admin/chapter/addChapter', params)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getTreeData()
					this.editNodeParam = {}
					this.nodeEditVisible = false
				}
			},
			//添加章节
			addChapter() {
				this.nodeEditVisibleTitle = '添加章节';
				this.nodeEditVisible = true;
				this.editNodeParam = {
					showOpen: false
				}
				this.editNodeParam.cityCode = this.query2.cityCode
			},
			//获取章节数
			async getTreeData() {
				const res = await this.$get('/admin/chapter/pageChapter', this.query2)
				if (res.code == 1000) {
					this.treeData = res.data
					this.pageTreeTotal = res.data.length
					this.advertiseMiniShow()
					this.getAllArea()
				}
			},
			handlePageChangeTree(val) {
				this.query2.pageNumber = val
				this.getTreeData();
			},
			//选择节点，加载数据
			selectNode(node) {
				this.menuVisible = false;
				this.selectedNodeName = node.name;
				this.query.chapterId = node.id;
				this.leftClickData = node;
				if (node.childs.length == 0) {
					this.getData();
				} else {
					this.tableData = [];
				}
			},
			clickRight(event, object, value, element) {
				if (this.objectID !== object.id) {
					this.objectID = object.id;
					this.menuVisible = true;
					this.rightClickData = object;
					this.rightClickNode = value;
				} else {
					this.menuVisible = !this.menuVisible;
				}
				document.addEventListener('click', e => {
					this.menuVisible = false;
					this.objectID = null;
				});
				let menu = document.querySelector('#rightClickMenu');
				/* 菜单定位基于鼠标点击位置 */
				menu.style.left = event.clientX + 'px';
				menu.style.top = event.clientY + 'px';
				menu.style.position = 'absolute'; // 为新创建的DIV指定绝对定位
				menu.style.width = 130 + 'px';
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//分页
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			//获取列表数据
			async getData() {
				this.tableData = []
				console.log(this.leftClickData, "this.leftClickData222")
				if (this.leftClickData.childs.length > 0) {
					this.$message.warning('非最底层章节不可添加试题');
					return;
				}
				if (this.leftClickData.addType == 1) {
					this.$message.warning('关联章节分类的不能自动添加试题');
					return;
				}
				if (this.leftClickData.addType == 2) {
					this.$message.warning('关联标签分类的不能自动添加试题');
					return;
				}
				this.query.roleType = 1
				const res = await this.$get('/admin/chapter/getChapterQuestions', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//搜索
			handleSearch() {
				if (this.$.isEmpty(this.query.chapterId)) {
					this.$message.warning('请选择左侧叶子章节进行搜索');
					return;
				}
				this.query.pageNumber = 1
				this.getData();
			},
			//重置
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			},
			//获取题型
			async getType() {
				const res = await this.$get('/admin/questionType/getQuestionSort', this.query)
				if (res.code == 1000) {
					this.typeList = res.data
				}
			},
			getSort() {
				this.$get('/admin/question/getQuestionSort', {
					type: 0
				}).then(res => {
					if (res.code == 1000) {
						this.categoryId1Data = res.data.list
					}
				})
				this.$get('/admin/question/getQuestionSort', {
					type: 1
				}).then(res => {
					if (res.code == 1000) {
						this.categoryId2Data = res.data.list
					}
				})
				this.$get('/admin/question/getQuestionSort', {
					type: 2
				}).then(res => {
					if (res.code == 1000) {
						this.categoryId3Data = res.data.list
					}
				})
			},
			//获取标签下拉
			async getTagList() {
				const res = await this.$post('/admin/label/labelList')
				if (res.code == 1000) {
					this.tagList = res.data.list
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .el-tree-node__expand-icon.is-leaf {
		color: #C0C4CC !important;
	}

	.el-menu-vertical {
		border: 3px solid rgb(84, 92, 100);
		border-radius: 10px;
		z-index: 100;
		background-color: #777;
	}

	.menuItem {
		height: 30px;
		line-height: 30px;
		background-color: #545c64;
		font-size: 14px;
	}

	.menuItem:hover {
		background-color: #409eff;
	}

	/deep/ .el-tree .is-leaf {
		display: none;
	}
</style>